<!DOCTYPE html>
<html>
<head>
	<title>Settings</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Bootstrap -->
	<link href="../../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
	<script src="../../lib/jquery/jquery-1.9.1.js"></script>
	<script src='../../lib/jquery-plugins/textcomplete/jquery.textcomplete.js'></script>
	<script src="../../lib/bootstrap/js/bootstrap.js"></script>
	<script type="text/javascript" src="OptionsPageController.js"></script>
	<script type="text/javascript" src="../common/utils/UrlUtils.js"></script>
	<script type="text/javascript" src="../datamodel/TargetWinDefinition.js"></script>
	<script type="text/javascript" src="../datamodel/Script.js"></script>
	<link type="text/css" rel="stylesheet" href='../../lib/jquery-plugins/textcomplete/jquery.textcomplete.css'/>
</head>
<body>
	<div class="container">
		<div class="page-header">
			<h1>Customize your Web Settings</h1>
		</div>
		<div class="row">
			<div class="col-lg-3">
				<div class="row">
					<div class="col-lg-12 form-group">
						<label for="scriptFilter">Filter</label>
						<div class="input-group">
							<input id="scriptFilter" type="text" class="form-control">
							<span class="input-group-btn">
								<button class="btn btn-default" type="button">Go!</button>
							</span>
						</div>
					</div>
				</div>
				<div>
					<table id="scripts" class="table table-striped table-bordered">
						<tr>
							<td></td>
							<td>Script Name</td>
							<td></td>
						</tr>
						<tr>
							<td><span class="glyphicon glyphicon-edit"></span></td>
							<td>asdf</span></td>
							<td><span class="glyphicon glyphicon-trash"></span></td>
						</tr>
					</table>
				</div>
				<!-- /input-group -->
			</div>
			<div class="col-lg-9">
				<div class="row">
					<div class="col-lg-9">
						<div class="form-group">
							<label for="scriptName">Script Name</label> <input type="text"
								class="form-control" id="scriptName" placeholder="Script Name">
						</div>
					</div>
					<div class="col-lg-3">
						<div class="form-group">
							<label for="uuid">UUId</label> <input type="text"
								class="form-control" id="uuid" readonly tabindex="-1">
						</div>
					</div>
				</div>
				<div class="row">
					<div class="form-group col-xs-12">
						<div class="input-group col-xs-12">
							<label for="urls">Include-/Exclude-URLs</label>
							<textarea id="urls" rows="4" class="form-control col-xs-12"></textarea>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="form-group col-xs-12">
						<div class="input-group col-xs-12">
							<label for="onloadJSCode">JavaScript Code</label>
							<textarea id="onloadJSCode" rows="10"
								class="form-control col-xs-12"></textarea>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12">
						<button id="applyBtn" accesskey="a" class="btn btn-default"><u>A</u>pply & Test</button>
						<button id="saveBtn" accesskey="s" class="btn btn-default"><u>S</u>ave</button>
						<button id="deleteBtn" accesskey="l" class="btn btn-default">De<u>l</u>ete</button>
						<button id="cancelBtn" accesskey="c" class="btn btn-default"><u>C</u>ancel</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
